import React, { useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { memo } from 'react'
import { SearchBar, Grid, Card, Swiper, Skeleton } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import { MyHome } from './style'
import { useAppDispatch, useAppSelector } from '@/store'
import { fetchHomeDataAction } from './store'
import city from '@/assets/images/ic_city.png'
import { useNavigate } from 'react-router-dom'

interface Iprops {
  children?: ReactNode
}
const Home: FC<Iprops> = () => {
  const [cityName, setCityName] = useState('')
  const myFun = (result: any) => {
    const cityName = result.name
    setCityName(cityName)
    console.log('当前定位城市:' + cityName)
  }
  const myCity = new window.BMap.LocalCity()

  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  useEffect(() => {
    myCity.get(myFun)

    dispatch(fetchHomeDataAction())
  }, [])
  const {
    home: { slides, nav2s, hospitals, loading }
  } = useAppSelector((state) => ({
    home: state.home
  }))
  // hospitals, nav2s,
  const renderSkeleton = () => (
    <MyHome>
      <div className="home-page">
        {/* 顶部区域骨架 */}
        <div className="home-header">
          <Skeleton.Paragraph
            lineCount={1}
            animated
            style={{ width: 80, height: 24 }}
          />
          <Skeleton.Paragraph
            lineCount={1}
            animated
            style={{ width: 100, height: 24, marginLeft: 8 }}
          />
          <Skeleton
            style={{ width: '60%', height: 32, marginLeft: 8 }}
            animated
          />
        </div>

        {/* Banner 骨架 */}
        <div className="banner" style={{ height: 160, overflow: 'hidden' }}>
          <Skeleton style={{ width: '100%', height: '100%' }} animated />
        </div>
        {/* 功能区骨架 */}
        <div className="grid">
          <Grid columns={2} gap={8}>
            {[1, 2].map((i) => (
              <Grid.Item key={i}>
                <Skeleton style={{ width: '100%', height: 93 }} animated />
              </Grid.Item>
            ))}
          </Grid>
        </div>
        {/* 医院列表骨架 */}
        <div className="hospital-list">
          {[1, 2, 3].map((i) => (
            <Card key={i} className="hospital-card">
              <div className="hospital-item">
                <Skeleton
                  style={{ width: 80, height: 80, borderRadius: 6 }}
                  animated
                />
                <div className="hospital-info" style={{ flex: 1 }}>
                  <Skeleton.Paragraph
                    lineCount={1}
                    animated
                    style={{ width: '60%' }}
                  />
                  <Skeleton.Paragraph
                    lineCount={1}
                    animated
                    style={{ width: '40%', marginTop: 4 }}
                  />
                  <Skeleton.Paragraph
                    lineCount={2}
                    animated
                    style={{ width: '80%', marginTop: 4 }}
                  />
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </MyHome>
  )
  if (loading) {
    return renderSkeleton()
  }
  const handleItemId = (item: any) => {
    if (item !== '') {
      navigate(`/corder?id=${item.id}&hName=${item.name}`)
    } else {
      navigate('/corder')
    }
  }

  return (
    <MyHome>
      <div className="home-page">
        {/* 顶部区域 */}
        <div className="home-header">
          <img src={city} alt="" />
          <div className="location" onClick={() => navigate('/map')}>
            {cityName} <RightOutline />
          </div>

          <SearchBar
            placeholder="找医院"
            onFocus={() => {
              navigate('/search')
            }}
          />
        </div>

        {/* banner */}
        <div className="banner">
          <Swiper loop autoplay>
            {slides.map((item) => {
              return (
                <Swiper.Item key={item.id}>
                  <div
                    style={{ backgroundImage: `url(${item.pic_image_url})` }}
                    className="swiper"
                  ></div>
                </Swiper.Item>
              )
            })}
          </Swiper>
        </div>

        {/* 功能区 */}
        <Grid columns={2} gap={8} className="grid">
          {nav2s.map((item) => {
            return (
              <Grid.Item key={item.id} onClick={() => handleItemId('')}>
                <img src={`${item.pic_image_url}`} alt={item.title} />
              </Grid.Item>
            )
          })}
        </Grid>

        {/* 医院列表 */}
        <div className="hospital-list">
          {hospitals.map((item) => (
            <Card key={item.id} className="hospital-card">
              <div className="hospital-item" onClick={() => handleItemId(item)}>
                <img
                  src={item.avatar_url}
                  alt={item.name}
                  className="hospital-img"
                />
                <div className="hospital-info">
                  <h4>{item.name}</h4>
                  <p className="level">
                    {item.rank}
                    {'\u00A0\u00A0'}
                    {item.label}
                  </p>
                  <p className="desc">{item.intro}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </MyHome>
  )
}
export default memo(Home)
